<template>
    <div class="containerBox">
        <div class="navbar-fixed-top transparent">
            <div class="header_container" style="height: 80px;">
                <!--                header-->
                <div class="loyo-navi-container">
                    <nav class="loyo-navbar">
                        <div class="loyo-navbar-header">
                            <div class="navbar-brand pull-left">
                                <img class="loyo-logo" style="margin-top: 5px;height:60%"
                                     src="https://assets.ukuaiqi.com/assets/new-logo-blue-b9d33407b66cd4a463006a936db6f2ae7d32c73bba37ca1bdcbd3a4923a95af6.png"
                                     alt="New logo blue b9d33407b66cd4a463006a936db6f2ae7d32c73bba37ca1bdcbd3a4923a95af6">
                                <div class="logo-divider"></div>
                                <img src="https://assets.ukuaiqi.com/assets/new-logo-wechat-blue-5b4124253b8bdbb89e6ee806377fd87c5a3f6de0d52b675ce339fe8f777055b3.png"
                                     alt="New logo wechat blue 5b4124253b8bdbb89e6ee806377fd87c5a3f6de0d52b675ce339fe8f777055b3"
                                     style="margin-top: 5px;height: 30px">
                            </div>
                            <div class="navbar-brand pull-right">
                                <div class="navTitle">
                                    <span style="color: rgb(44, 157, 252)">首页</span>
                                    <span>产品</span>
                                    <span>增值服务</span>
                                    <span>解决方案</span>
                                    <span>客户服务</span>
                                    <span>关于我们</span>
                                </div>
                                <div class="navBtn">
                                    <el-button>免费体验</el-button>
                                    <el-button type="primary" style="color: white">登录</el-button>
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
                <!--内容-->
                <div class="home__container">
                    <!--                    banner-->
                    <el-carousel height="812px">
                        <el-carousel-item v-for="item in bannerList" :key="item">
                            <img :src="item.src"/>
                            <div class="container1">To B销售精准获客赢单平台</div>
                            <div class="container2">大数据线索挖掘+智能移动CRM系统+成功销售模式打造</div>
                            <div class="container3">
                                <button class="loyo-button-type1 loyo-download-btn download" style="margin-right:20px">&nbsp;&nbsp;&nbsp;&nbsp;下载快启</button>
                                <button class=" btn-experience loyo-button-type1 loyo-trial-btn" type="button">免费体验
                                </button>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="loyo-section align-center">
                        <div class="loyo_dynamic">
                            <div class="news dynamic_item">
                                <div class="title">新闻动态</div>
                                <div class="content">
                                    <a href="/newsDetail/6254eb14384dbad523c3a7b1.html">正式推出AI自动引流方案</a>
                                    <span style="float: left;">new</span>
                                </div>
                                <div class="content">
                                    <a href="/newsDetail/62455292384dbad52365e3ed.html">36kr专题：快启智慧销售云平台</a>
                                </div>
                            </div>
                            <label class="interval"></label>
                            <div class="classroom dynamic_item">
                                <div class="title">快启课堂</div>
                                <div class="content">
                                    <a href="/courseDetail/62a7ffea384dbad5238d9c06.html">SPIN销售法——销售领域最大的研究成果</a>
                                </div>
                                <div class="content">
                                    <a href="/courseDetail/61e912bd384dbad523814356.html">TOB获客还能这么玩？</a>
                                </div>
                            </div>
                            <label class="interval"></label>
                            <div class="case dynamic_item">
                                <div class="title">客户案例</div>
                                <div class="content">
                                    <a href="/caseDetail/6285f385384dbad5236bef21.html">品牌家居企业的招商困境与出路</a>
                                </div>
                                <div class="content">
                                    <a href="/caseDetail/6285f227384dbad52368683a.html">中国名酒企业的增长之路</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="  loyo-section1 align-center">
                        <div class="product-section">
                            <div class="product-item">
                                <img alt="CRM标准版" title="CRM标准版"
                                     src="https://assets.ukuaiqi.com/assets/new-home-icon-duli-315e41085b97825de0f8bd9096f6b3da57472a7b5c56a6b75b9afc9eca11b3b6.jpg">
                                <p class="f1">CRM标准版</p>
                                <a href="./standalone" title="CRM标准版">
                                    了解详情
                                </a>
                            </div>
                            <div class="product-item">
                                <img alt="企业微信版" title="企业微信版"
                                     src="https://assets.ukuaiqi.com/assets/new-home-icon-wechat-4db1565380347b3d292d96808e0e83fc2cd63de7b44a88730d19b98a6957a228.jpg">
                                <p class="f1">企业微信版</p>
                                <a href="https://wx.ukuaiqi.com" title="企业微信版">
                                    了解详情
                                </a>
                            </div>
                            <div class="product-item">
                                <img alt="企业定制" title="企业定制"
                                     src="https://assets.ukuaiqi.com/assets/new-home-icon-customized-7ed52514209c688755663e09564c320c930706038fd96943142b3a4da689941c.jpg">
                                <p class="f1">企业定制</p>
                                <a href="./customize" title="企业定制">
                                    了解详情
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="loyo-section">
                        <div class="crm-2-section">
                            <div class="section-title underline">快启，智能CRM系统</div>
                            <div class="module">
                                <div class="content-column">
                                    <div class="pic">
                                        <img class="normal" style="margin-top:120px;transform:translateX(0px);"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce2_nor@2x-594bb7881bd08b026a8ad0b129d04f16a1cb7a056a8e321520242c7bc99ff35d.png"
                                             alt="Home crm introduce2 nor@2x 594bb7881bd08b026a8ad0b129d04f16a1cb7a056a8e321520242c7bc99ff35d">
                                        <img class="hover" style="margin-top:120px;transform:translateX(0px);"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce2_hover@2x-fe825e3822cbfaa1dd066b8588a762366d19d3fe974137704c09ad626210787f.png"
                                             alt="Home crm introduce2 hover@2x fe825e3822cbfaa1dd066b8588a762366d19d3fe974137704c09ad626210787f">
                                    </div>
                                    <div class="pic">
                                        <img class="normal" style="transform:translateX(0px);"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce3_nor@2x-96d79a2c1f768f4554d36aad970cd298af2abc2b92ecc6e3ecc2204aa45c845e.png"
                                             alt="Home crm introduce3 nor@2x 96d79a2c1f768f4554d36aad970cd298af2abc2b92ecc6e3ecc2204aa45c845e">
                                        <img class="hover" style="transform:translateX(0px);"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce3_hover@2x-36e59e5cd2d43a593d1b7f0ee72aa4f30c3af07fbed386c36acba2f44de8d452.png"
                                             alt="Home crm introduce3 hover@2x 36e59e5cd2d43a593d1b7f0ee72aa4f30c3af07fbed386c36acba2f44de8d452">
                                    </div>
                                </div>
                                <div class="content-column">
                                    <div class="pic">
                                        <img class="normal"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce1_nor@2x-e3220a1baf329defb2e9c5da4f8b268a57248626609103603c9a9d14ab1d8e4a.png"
                                             alt="Home crm introduce1 nor@2x e3220a1baf329defb2e9c5da4f8b268a57248626609103603c9a9d14ab1d8e4a">
                                        <img class="hover"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce1_hover@2x-a25e0f93a72b51c667518a74315778655a340f7313645c50ec38318d935aa6af.png"
                                             alt="Home crm introduce1 hover@2x a25e0f93a72b51c667518a74315778655a340f7313645c50ec38318d935aa6af">
                                    </div>

                                    <div class="pic">
                                        <img class="normal"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce@2x-fdf9e095edc1c502793039026e6fa8d6af4741a14fb50a0152cd61e4de31a57d.png"
                                             alt="Home crm introduce@2x fdf9e095edc1c502793039026e6fa8d6af4741a14fb50a0152cd61e4de31a57d">
                                        <img class="hover"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce@2x-fdf9e095edc1c502793039026e6fa8d6af4741a14fb50a0152cd61e4de31a57d.png"
                                             alt="Home crm introduce@2x fdf9e095edc1c502793039026e6fa8d6af4741a14fb50a0152cd61e4de31a57d">
                                    </div>
                                </div>
                                <div class="content-column">
                                    <div class="pic">
                                        <img class="normal" style="margin-top:120px;transform:translateX(0px);"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce4_nor@2x-cac2692c7c585d9562ab1bf1ce5c87c4c25847141c9acd71c3564ae5ba9bb2b7.png"
                                             alt="Home crm introduce4 nor@2x cac2692c7c585d9562ab1bf1ce5c87c4c25847141c9acd71c3564ae5ba9bb2b7">
                                        <img class="hover" style="margin-top:120px;transform:translateX(0px);"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce4_hover@2x-682a5440e6c28f9456637ddd7f000f6ea9fed201dba29d9ec2b0db3b65decece.png"
                                             alt="Home crm introduce4 hover@2x 682a5440e6c28f9456637ddd7f000f6ea9fed201dba29d9ec2b0db3b65decece">
                                    </div>

                                    <div class="pic">
                                        <img class="normal" style="transform:translateX(0px);"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce5_nor@2x-e4d7e75fd0c2cda2e9b2ce964ba656ad25022cb852b04bcf6ab8aafced9c1b2b.png"
                                             alt="Home crm introduce5 nor@2x e4d7e75fd0c2cda2e9b2ce964ba656ad25022cb852b04bcf6ab8aafced9c1b2b">
                                        <img class="hover" style="transform:translateX(0px);"
                                             src="https://assets.ukuaiqi.com/assets/crm/home_crm_introduce5_hover@2x-fd41463a899d75b16a70e1043fe7759a9ded0fdf906b2c0810d5e613aabdf83b.png"
                                             alt="Home crm introduce5 hover@2x fd41463a899d75b16a70e1043fe7759a9ded0fdf906b2c0810d5e613aabdf83b">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="loyo-section1 align-center">
                        <div class="data-section" style="padding: 50px 0 100px 0;">
                            <div class="section-title underline">
                                提高销售效率，提升销售业绩
                            </div>
                            <div class="data-item">
                                <img class="icon"
                                     src="https://assets.ukuaiqi.com/assets/new-home-achievement-aaaaffe5dee3564b824329b632c959cac7851bc996dfca4ad8a3b12e483056eb.svg"
                                     alt="New home achievement aaaaffe5dee3564b824329b632c959cac7851bc996dfca4ad8a3b12e483056eb">
                                <div class="text-container">
                                    <p class="title">50%</p>
                                    <p class="detail">销售业绩提升</p>
                                </div>
                            </div>
                            <div class="data-item data-item1">
                                <img class="icon"
                                     src="https://assets.ukuaiqi.com/assets/new-home-conversion-rate-67b582bef5c8dbcca14d866c48a796297bbc158117fdfe14553d60d83fa196c8.svg"
                                     alt="New home conversion rate 67b582bef5c8dbcca14d866c48a796297bbc158117fdfe14553d60d83fa196c8">
                                <div class="text-container">
                                    <p class="title">36%</p>
                                    <p class="detail">客户转化率提升</p>
                                </div>
                            </div>
                            <div class="data-item data-item1">
                                <img class="icon"
                                     src="https://assets.ukuaiqi.com/assets/new-home-efficiency-6c619723f7be946f3189a9688995ca48b1df119e8bd3f7fd9327ebdbe49f2ff5.svg"
                                     alt="New home efficiency 6c619723f7be946f3189a9688995ca48b1df119e8bd3f7fd9327ebdbe49f2ff5">
                                <div class="text-container">
                                    <p class="title">45%</p>
                                    <p class="detail">工作效率提升</p>
                                </div>
                            </div>
                            <div id="loyo_crm_carousel" class="carousel slide home-crm-carousel" data-ride="carousel">

                                <div class="carousel-inner"
                                     style="width: 1150px; margin: 0 auto; box-shadow: 0px 8px 40px #ecebeb;">

                                    <el-carousel height="460px"  indicator-position="outside">
                                        <el-carousel-item  >
                                            <div class="home_intro">
                                                <img class="home-intro-img"
                                                     src="https://assets.ukuaiqi.com/assets/crm/home_app_introduction1@2x-34c11e0d87a391728c498b70901be9d73c539f7e8b3dcece3b510559ebc56f9c.png"
                                                     alt="Home app introduction1@2x 34c11e0d87a391728c498b70901be9d73c539f7e8b3dcece3b510559ebc56f9c">
                                            </div>
                                        </el-carousel-item>
                                        <el-carousel-item  >
                                            <div class="home_intro">
                                                <img class="home-intro-img"
                                                     src="https://assets.ukuaiqi.com/assets/crm/home_app_introduction2@2x-dd8cf94519803385f74d9a201c0251e24f297b8acb47217e4c9a6991bb73783c.png"
                                                     alt="Home app introduction2@2x dd8cf94519803385f74d9a201c0251e24f297b8acb47217e4c9a6991bb73783c">
                                            </div>
                                        </el-carousel-item>
                                        <el-carousel-item  >
                                            <div class="home_intro">
                                                <img class="home-intro-img"
                                                     src="https://assets.ukuaiqi.com/assets/crm/home_app_introduction3@2x-a0a5fa5d8829d28a0724f59c57ab62a42ee238c296542b1640ff7dd9fcb15388.png"
                                                     alt="Home app introduction3@2x a0a5fa5d8829d28a0724f59c57ab62a42ee238c296542b1640ff7dd9fcb15388">
                                            </div>
                                        </el-carousel-item>
                                        <el-carousel-item  >
                                            <div class="home_intro">
                                                <img class="home-intro-img"
                                                     src="https://assets.ukuaiqi.com/assets/crm/home_app_introduction4@2x-7ba70685ee808c3c095f5e3c594850eaa5bdfa7291c29ab22ec51138507244d3.png"
                                                     alt="Home app introduction4@2x 7ba70685ee808c3c095f5e3c594850eaa5bdfa7291c29ab22ec51138507244d3">
                                            </div>
                                        </el-carousel-item>
                                        <el-carousel-item  >
                                            <div class="home_intro">
                                                <img class="home-intro-img"
                                                     src="https://assets.ukuaiqi.com/assets/crm/home_app_introduction5@2x-93207c2130e3fc424a1537f806786d4ce8d381f146f3180bedd9ae4695484333.png"
                                                     alt="Home app introduction5@2x 93207c2130e3fc424a1537f806786d4ce8d381f146f3180bedd9ae4695484333">
                                            </div>
                                        </el-carousel-item>
                                    </el-carousel>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="loyo-section align-center">
                        <div class="service-section">
                            <div class="section-title underline">
                                值得信赖的销售管理专家
                            </div>
                            <div class="service-item">
                                <img class="icon" src="https://assets.ukuaiqi.com/assets/new-home-function-7ee337d17e94542415e19bc96f52d6fd5d9ecc50381ebb59d00d169b32020d25.svg" alt="New home function 7ee337d17e94542415e19bc96f52d6fd5d9ecc50381ebb59d00d169b32020d25">
                                <div class="text-container">
                                    <p class="title">功能简单易用</p>
                                    <p class="detail">快启秉承轻、简、易的设计理念，从界面交互到功能架构，都保持很好的易用性，带给你惊艳和极致的体验。</p>
                                </div>

                                <img class="icon" src="https://assets.ukuaiqi.com/assets/new-home-system-9568a78f4ea7411914f8d8fe8f791f797aff0f8dcc93fc89d3fd5707351e67cf.svg" alt="New home system 9568a78f4ea7411914f8d8fe8f791f797aff0f8dcc93fc89d3fd5707351e67cf">
                                <div class="text-container">
                                    <p class="title">系统安全可靠</p>
                                    <p class="detail">采用阿里.云盾系统，从网络防护、数据储存、权限控制等层面全方位保障数据安全，为您的企业安全保驾护航。</p>
                                </div>
                            </div>
                            <div class="service-item">
                                <img src="https://assets.ukuaiqi.com/assets/new-home-illustration-2-16f585d6fb3915ea84f62d0560001a99121926f92302bfbda851e7cae60a1f9d.png" alt="New home illustration 2 16f585d6fb3915ea84f62d0560001a99121926f92302bfbda851e7cae60a1f9d">
                            </div>
                            <div class="service-item">
                                <img class="icon" src="https://assets.ukuaiqi.com/assets/new-home-service-3a8ad0c98f4c734e89dd2ef061e66e17c5a8fab845c47bcaf310db64b4c43f87.svg" alt="New home service 3a8ad0c98f4c734e89dd2ef061e66e17c5a8fab845c47bcaf310db64b4c43f87">
                                <div class="text-container">
                                    <p class="title">专家级管家服务</p>
                                    <p class="detail">全生命周期随叫随到的专家级管家服务，提供部署实施、培训服务、技术支持和专家指导等多渠道多维度的落地服务支持。</p>
                                </div>

                                <img class="icon" src="https://assets.ukuaiqi.com/assets/new-home-upgrade-912e968b34148c5fd5c966d03d6f9dbaf1113477b51f487de60e2febbdec0f36.svg" alt="New home upgrade 912e968b34148c5fd5c966d03d6f9dbaf1113477b51f487de60e2febbdec0f36">
                                <div class="text-container">
                                    <p class="title">终身免费升级</p>
                                    <p class="detail">从上线之初，快启一直保证每月两个版本的迭代速度，不断带给用户更强大的新功能，而这一切全部都是免费的。</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="loyo-section">
                        <img class="img-bg" src="https://assets.ukuaiqi.com/assets/home_experience_bg_c-ccb054c6a0bcfcfd1f70eb5949322e604412d537f6816a07d417e7add620d950.png" alt="Home experience bg c ccb054c6a0bcfcfd1f70eb5949322e604412d537f6816a07d417e7add620d950">
                        <div class="trial-container">
                            免费体验快启CRM
                            <button class="btn-experience loyo-button-type3 trial">立即体验</button>
                        </div>
                    </div>

                    <div class="footer-divider"></div>
                    <footer class="footer__container">
                        <div class="footer-content">
                            <ul>
                                <li class="width-12">
                                    <dl>
                                        <dt>产品</dt>
                                        <dd>  <a href="/standalone" target="_blank">CRM标准版</a></dd>
                                        <dd>  <a href="https://wx.ukuaiqi.com" target="_blank">企业微信版</a></dd>
                                        <dd>  <a href="/customize" target="_blank">企业定制</a></dd>
                                        <dd>  <a href="/download" target="_blank">快启APP下载</a></dd>
                                        <!-- <dd>  <a href="/price" target="_blank">产品价格</a></dd> -->
                                    </dl>
                                </li>
                                <li class="width-12">
                                    <dl>
                                        <dt>增值服务</dt>
                                        <dd>  <a href="/caveGuest" target="_blank">快启精线索</a></dd>
                                        <dd>  <a href="/service#sharesales">共享销售</a></dd>
                                        <dd>  <a href="/service#workphone">微信客户管理</a></dd>
                                        <dd>  <a href="/service#bussiness-phone">商务电话</a></dd>
                                        <dd>  <a href="/service#enterprise-service">企业咨询服务</a></dd>
                                    </dl>
                                </li>
                                <li class="width-12">
                                    <dl>
                                        <dt>解决方案</dt>
                                        <dd>  <a href="/projectTeam" target="_blank">项目型团队</a></dd>
                                        <dd>  <a href="/relationTeam" target="_blank">关系型团队</a></dd>
                                        <dd>  <a href="/case" target="_blank">客户案例</a></dd>
                                    </dl>
                                </li>
                                <li class="width-12">
                                    <dl>
                                        <dt>客户服务</dt>
                                        <dd>  <a href="/help" target="_blank">帮助中心</a></dd>
                                        <dd>  <a href="/feedback" rel="nofollow" target="_blank">用户反馈</a></dd>
                                        <dd>  <a href="/course" target="_blank">快启课堂</a></dd>
                                    </dl>
                                </li>
                                <li class="width-12">
                                    <dl>
                                        <dt>关于我们</dt>
                                        <dd>  <a href="/about" target="_blank">快启简介</a></dd>
                                        <dd>  <a href="/news" target="_blank">新闻动态</a></dd>
                                        <dd>  <a href="/joinUs" rel="nofollow" target="_blank">加入我们</a></dd>
                                        <dd>  <a href="/contact" rel="nofollow" target="_blank">联系我们</a></dd>
                                    </dl>
                                </li>
                            </ul>
                        </div>

                        <div class="footer-link">
                            <div class="pb15">友情链接</div>
                            <ul>
                                <li class="width-12">
                                    <a href="http://www.360loyo.com/" target="_blank">乐育</a>
                                </li>
                                <li class="width-12">
                                    <a href="https://www.doncus.com/" target="_blank">洞客</a>
                                </li>
                                <li class="width-12">
                                    <a>掘金企服</a>
                                </li>
                                <li class="width-12">
                                    <a>MAKA</a>
                                </li>
                                <li class="width-12">
                                    <a>微信直播</a>
                                </li>
                                <li class="width-12">
                                    <a>ZOL软件下载</a>
                                </li>
                                <li class="width-12">
                                    <a>企微云</a>
                                </li>
                                <li class="width-12">
                                    <a>客如云</a>
                                </li>
                            </ul>
                            <ul>
                                <li class="width-12">
                                    <a>汽车论坛</a>
                                </li>
                                <li class="width-12">
                                    <a>企业网盘</a>
                                </li>
                                <li class="width-12">
                                    <a>中细软集团</a>
                                </li>
                                <li class="width-12">
                                    <a>全时云会议</a>
                                </li>
                                <li class="width-12">
                                    <a>慧算账</a>
                                </li>
                                <li class="width-12">
                                    <a>BD沃客</a>
                                </li>
                                <li class="width-12">
                                    <a>31会议</a>
                                </li>
                                <li class="width-12">
                                    <a href="http://www.ehangnet.com">软件测试报告</a>
                                </li>
                            </ul>
                        </div>
                        <div class="loyo-copyright">
                            咨询热线：400-086-2680      地址：成都市高新区世纪城南路599号 软件园D区7-901
                            <br>快启CRM ©2017-2018 Loyo All Rights Reserved 乐云互动 版权所有
                            <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">蜀ICP备12015673号-5</a> &nbsp;&nbsp;
                            <a target="_blank" href="/file/treaty ">用户协议</a>&nbsp;&nbsp;
                            <a target="_blank" href="/file/policy">隐私政策</a><br>
                            开发者名称：成都乐云互动网络技术有限公司    版本号：2.25.0
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {useLogin} from '@/services/model/user'
    import {Message} from "element-ui";
    import {setLocalStorageItem, removeLocalStorageItem} from '@/utils/storage-helper'
    import banner1 from './banner1.png'
    import banner2 from './banner2.png'
    import banner3 from './banner3.png'
    import banner4 from './banner4.png'
    import yinCode from './yinCode.png'
    import weixinCode from './weixinCode.png'

    export default {
        data() {
            return {
                bannerList: [{
                    src: banner1,

                }, {
                    src: banner2
                }, {
                    src: banner3
                }, {
                    src: banner4
                }],

            }

        },
        // Add data, computed properties, methods, etc. here if needed
    }
</script>
<style scoped lang="less">
  .width-12 {
        width: 12%;
      float: left;
    }
  dl {
      margin-top: 0;
      margin-bottom: 20px;
    dt {
          font-size: 14px;
          color: #222328;
          font-weight: normal;
        height: 40px;
      }
       dd {
          font-size: 14px;
          color: #a8acb9;
          font-weight: normal;
          margin: 0;
          padding: 10px 0;
           height: 40px;
           a {
               font-size: 14px;
               color: #a8acb9;
               text-decoration: none;
           }
      }
  }
  .footer-link ul li>a {
      font-size: 14px;
      color: #a8acb9;
      text-decoration: none;
  }
    .footer__container {
        background: #fff;
        .footer-content{
            width: 1280px;
            margin: auto;
            ul{margin: 0;
                overflow: hidden;
                list-style: none;
                padding-bottom: 60px;

             li {
                    float: left;
                }
              .width-auto {
                    width: auto;
                  float: right;
                  dl {
                      margin-top: 0;
                      margin-bottom: 20px;
                    dt {
                          font-size: 14px;
                          color: #222328;
                          font-weight: normal;
                          padding-bottom: 12px;
                      }
                     dd {
                          font-size: 14px;
                          color: #a8acb9;
                          font-weight: normal;
                          margin: 0;
                          padding: 10px 0;

                         box-sizing: border-box;

               .share-popover {
                             display: none;
                             position: absolute;
                             top: 20px;
                             left: 30px;
                             -webkit-transform: translateX(-80%);
                             -ms-transform: translateX(-80%);
                             transform: translateX(-80%);
                             z-index: 9999999;
                             border: 1px solid #ddd;
                             box-shadow: 0 0 5px #ddd;
                             overflow: hidden;
                             width: 200px;
                             height: 200px;
                         }
              .share-popover img {
                             width: 198px;
                             height: 198px;
                         }
                   .weibo .share-icon {
                             background: url(https://assets.ukuaiqi.com/assets/home-follow-icon-blog-nor-51fae82….svg);
                         }
                          .share {
                             margin-right: 20px;
                             position: relative;

                  .share-icon {
                                  display: inline-block;
                                  width: 30px;
                                  height: 30px;
                              }
                         }
                      }
                  }
                }
            }
            .width-auto{
              dt {
                    font-size: 14px;
                    color: #222328;
                    font-weight: normal;
                    padding-bottom: 12px;

                }
             dd {
                 .share {
                     margin-right: 20px;
                     position: relative;
                     .weixin{
                      .share-icon {
                             background: url(https://assets.ukuaiqi.com/assets/home-follow-icon-wechat-nor-d8a1e42….svg);
                         }
                     }
                  .share-popover {
                         display: none;
                         position: absolute;
                         top: 20px;
                         left: 30px;
                         -webkit-transform: translateX(-80%);
                         -ms-transform: translateX(-80%);
                         transform: translateX(-80%);
                         z-index: 9999999;
                         border: 1px solid #ddd;
                         box-shadow: 0 0 5px #ddd;
                         overflow: hidden;
                         width: 200px;
                         height: 200px;
                     }
                 }
             }
            }
        }
        .footer-link {
            width: 1280px;
            margin: auto;
            ul {
                margin: 0;
                overflow: hidden;

margin-bottom: 15px;
                .width-12 {
                    width: 12%;
                    height: 30px;
                    line-height: 30px;
                    box-sizing: border-box;
                    dl {
                        margin-top: 0;
                        margin-bottom: 20px;
                        dt {
                            font-size: 14px;
                            color: #222328;
                            font-weight: normal;
                            padding-bottom: 12px;
                        }
                        dd {
                            font-size: 14px;
                            color: #a8acb9;
                            font-weight: normal;
                            margin: 0;
                            padding: 10px 0;
                            a {
                                font-size: 14px;
                                color: #a8acb9;
                                text-decoration: none;
                            }
                        }
                    }
                }
                .width-auto {
                    width: auto;
                }
            }
        }
    .loyo-copyright {
            background: #000000;
            background-image: initial;
            background-position-x: initial;
            background-position-y: initial;
            background-size: initial;
            background-repeat-x: initial;
            background-repeat-y: initial;
            background-attachment: initial;
            background-origin: initial;
            background-clip: initial;
            background-color: rgb(0, 0, 0);
            box-shadow: 0px -2px 0px 0px #007aff;
            color: rgba(255,255,255,0.65);
            letter-spacing: 1px;
            font-weight: 300;
            text-align: center;
            font-size: 12px;
            line-height: 22px;
            padding: 12px 0;
            font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;
     a {
            color: rgba(255,255,255,0.65);
        }
        }
    }

    .containerBox {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
  .weixin .share-icon {
      background: url(https://assets.ukuaiqi.com/assets/home-follow-icon-wechat-nor-d8a1e42….svg);
  }
  .footer-link {
      width: 1280px;
      margin: auto;
      .footer-link:before {
          position: absolute;
          content: '';
          background: #ddd;
          height: 1px;
          width: 100%;
          top: 0;
          left: 0;
          .pb15 {
              padding-bottom: 15px;
          }
          .footer-link ul {
              padding-bottom: 15px;
              margin: 0;
              overflow: hidden;
              list-style: none;
              height: 20px;
          }
      }
  }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;

        .header_container {
            width: 100%;
            height: 80px;
            line-height: 80px;
            min-width: 1320px;
            background: #fff;
            border-bottom: 1px solid #efeded;
            transition: all 0.25s;

            .loyo-navbar-header {
                display: flex;
                justify-content: space-between;
            }

            .loyo-navi-container {
                height: 80px;
                padding: 0 40px;
                line-height: 80px;

                .pull-left {
                    height: 80px;
                    line-height: 80px;
                    width: 50%;
                    display: flex;
                    align-items: center;

                    .logo-divider {
                        display: inline;
                        background: #007aff;
                        vertical-align: middle;
                        border: solid 1px #007aff;
                        height: 25px;
                        margin: 10px 28px 0 0;
                    }
                }

                .pull-right {
                    width: 50%;
                    height: 80px;
                    display: flex;

                    .navTitle {
                        width: 80%;

                        display: flex;

                        span {
                            cursor: pointer;
                            display: inline-block;
                            width: 18%;
                            text-align: center;
                        }

                        span:active, span:hover {
                            color: #00a3ff;
                        }
                    }

                    .navBtn {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .el-button {
                            border: solid 1px #007aff;
                            color: #007aff;
                            padding: 7px 20px;

                        }
                    }
                }


            }
        }

        .home__container {

            .container1 {
                font-size: 62px;
                color: #fff;
                line-height: 95px;
                font-weight: 400;
                position: absolute;
                top: 265px;
                width: 100%;
                text-align: center;
            }

            .container2 {
                font-size: 38px;
                color: #fff;
                font-weight: 100;
                line-height: 65px;
                letter-spacing: 0.1em;
                position: absolute;
                top: 370px;
                width: 100%;
                text-align: center;
            }

            .container3 {
                position: absolute;
                top: 490px;
                left: 50%;
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                transform: translateX(-50%);
                display: inline-block;
                text-align: center;
            }

            .align-center {
                text-align: center;
            }

            .loyo-download-btn.download {
                position: relative;
            }

            .loyo-button-type1 {
                width: 180px;
                height: 56px;
                color: #fff;
                font-size: 16px;
                border: 1px solid #007aff;
                border-radius: 4px;
                letter-spacing: 0.1em;
            }

            .loyo-clues-btn {
                background: #333333;
                border: 1px solid #333333;
            }

            .loyo-trial-btn {
                background: #007aff;
            }

            .loyo-section {
                background: #fafafa;
                position: relative;
                .loyo_dynamic {
                    background: #fafafa;
                    height: 200px;
                    width: 1280px;
                    margin: auto;

                    .dynamic_item {
                        display: inline-block;
                        text-align: left;
                        height: 200px;
                        box-sizing: border-box;
                        margin: 0 80px;
                        padding: 50px 0;

                        .title {
                            font-size: 20px;
                            height: 25px;
                            line-height: 25px;
                            padding: 0 0 6px 0;
                            color: #333;
                        }

                        .content {
                            font-size: 14px;
                            padding: 16px 0;
                            height: 25px;
                            line-height: 25px;
                            display: flex;
                        }
                    }
                }

                .crm-2-section {
                    width: 1280px;
                    margin: auto;
                    padding: 50px 0 50px 0;

                    .underline {
                        position: relative;
                        margin-bottom: 50px;
                    }

                    .section-title {
                        font-size: 38px;
                        color: #333;
                        height: 100px;
                        line-height: 100px;
                        letter-spacing: 0.1em;
                        -webkit-transition: all 0.25s;
                        transition: all 0.25s;
                        text-align: center;
                        margin-bottom: 20px;
                    }

                    .underline:after {
                        content: '';
                        position: absolute;
                        width: 60px;
                        height: 2px;
                        background: #ddd;
                        left: 50%;
                        -webkit-transform: translateX(-50%);
                        -ms-transform: translateX(-50%);
                        transform: translateX(-50%);
                        bottom: 10px;
                    }

                    .module {
                        margin: 0 0 50px;

                        .content-column {
                            display: inline-block;
                            text-align: center;
                            vertical-align: middle;
                            -webkit-transition: all 0.25s;
                            transition: all 0.25s;

                            .pic .hover {
                                display: none;
                            }

                            .pic .normal {
                                display: inline;
                            }

                            .pic .normal:hover + .hover {
                                display: inline;
                            }

                            .pic .normal:hover {
                                display: none;
                            }
                        }
                    }
                }
                .service-section{
                    width: 1280px;
                    margin: auto;
                    padding: 50px 0 50px 0;
                    .underline {
                        position: relative;
                        margin-bottom: 50px;
                    }

                    .section-title {
                        font-size: 38px;
                        color: #333;
                        height: 100px;
                        line-height: 100px;
                        letter-spacing: 0.1em;
                        -webkit-transition: all 0.25s;
                        transition: all 0.25s;
                        text-align: center;
                        margin-bottom: 20px;
                    }

                    .underline:after {
                        content: '';
                        position: absolute;
                        width: 60px;
                        height: 2px;
                        background: #ddd;
                        left: 50%;
                        -webkit-transform: translateX(-50%);
                        -ms-transform: translateX(-50%);
                        transform: translateX(-50%);
                        bottom: 10px;
                    }
                    .service-item {
                        display: inline-block;
                        text-align: center;
                        vertical-align: middle;
                        -webkit-transition: all 0.25s;
                        transition: all 0.25s;

                      .text-container {
                            width: 270px;
                            padding-bottom: 80px;
                           .title {
                              font-size: 24px;
                              color: #333;
                              padding-bottom: 5px;
                              line-height: 36px;
                              letter-spacing: 0.05em;
                          }
                     .detail {
                              font-size: 14px;
                              color: #999;
                              line-height: 26px;
                              letter-spacing: 0.05em;
                          }
                        }

                    }

                }
                .img-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .trial-container {
                    position: relative;
                    height: 450px;
                    line-height: 450px;
                    letter-spacing: 0.1em;
                    width: 100%;
                    display: inline-block;
                    text-align: center;
                    vertical-align: middle;
                    font-size: 48px;
                    color: #fff;
                    .loyo-button-type3 {
                        padding: 0 50px;
                        height: 68px;
                        border-radius: 34px;
                        border: 1px solid #fff;
                        text-align: center;
                        line-height: 66px;
                        text-shadow: none;
                        font-size: 24px;
                        letter-spacing: 0.1em;
                        -webkit-transform: translateY(-10px);
                        -ms-transform: translateY(-10px);
                        transform: translateY(-10px);
                    }
                    .loyo-button-type3.trial {
                        color: #fff;
                        background-color: #007aff;
                        border: 1px solid #007aff;
                    }
                }
            }

            .loyo-section1 {
                background: white;

                .product-section {
                    height: 270px;
                    width: 1280px;
                    margin: auto;

                    .product-item {
                        display: inline-block;
                        margin-left: 130px;
                        margin-right: 130px;
                        box-sizing: border-box;

                        p {
                            display: block;
                            font-size: 24px;
                            color: #333;
                            transition: all 0.25s;
                            height: 25px;
                            line-height: 25px;
                            margin-bottom: 20px;
                        }

                        a {
                            height: 25px;
                            display: block;
                            line-height: 25px;
                            text-decoration: none;
                            color: #2c9dfc;
                            transition: all 0.25s;
                        }

                    }
                }

                .underline {
                    position: relative;
                    margin-bottom: 50px;
                }

                .section-title {
                    font-size: 38px;
                    color: #333;
                    height: 100px;
                    line-height: 100px;
                    letter-spacing: 0.1em;
                    -webkit-transition: all 0.25s;
                    transition: all 0.25s;
                    text-align: center;
                    margin-bottom: 20px;
                }

                .underline:after {
                    content: '';
                    position: absolute;
                    width: 60px;
                    height: 2px;
                    background: #ddd;
                    left: 50%;
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
                    bottom: 10px;
                }

                .data-item {
                    position: relative;
                    display: inline-block;
                    text-align: left;
                    margin-top: 50px;
                    padding-left: 100px;
                    padding-right: 100px;
                    -webkit-transition: all 0.25s;
                    transition: all 0.25s;
                    .icon {
                        float: left;
                        transform: translateX(10px);
                    }
                    .text-container {
                        margin-left: 88px;
                      .title {
                            font-size: 48px;
                            color: #666;
                            font-weight: 100;
                          height: 5d0px;
                        }
                       .detail {
                            font-size: 14px;
                            color: #999;
                        }

                    }
                }
                .data-item1:before {
                    position: absolute;
                    content: '';
                    width: 1px;
                    height: 60%;
                    background: #ddd;
                    left: 0;
                    top: 0;
                }
            }
            .footer-divider {
                width: 1280px;
                margin: auto;
                padding: 50px 0;
                position: relative;
            }
            .footer-divider:before {
                position: absolute;
                content: '';
                background: #ddd;
                height: 1px;
                width: 100%;
                top: 50%;
                left: 0;
            }
        }
    }


    /*.home__container  /deep/.el-carousel__indicators {*/
    /*    position: absolute;*/
    /*    bottom: 20px;*/
    /*    width: 100%;*/
    /*    text-align: center;*/
    /*}*/

    /*.home__container  /deep/ .el-carousel__button::before {*/
    /*    font-size: 20px;*/
    /*}*/

    /*.home__container/deep/ .el-carousel__indicator {*/
    /*    width: 25px;*/
    /*    height: 10px;*/
    /*    border-radius: 50%;*/
    /*    display: inline-block;*/
    /*    margin: 0 5px;*/
    /*    background: #ccc; !* 圆点未激活时的颜色 *!*/
    /*}*/

    /*.home__container  /deep/ .el-carousel__indicator.is-active {*/
    /*    background: #333; !* 圆点激活时的颜色 *!*/
    /*}*/
  .footer-link{
      position: relative;
  }
  .footer-link:before {
      position: absolute;
      content: '';
      background: #ddd;
      height: 1px;
      width: 100%;
      top: 0;
      left: 0;
  }
</style>

<style>
    .el-carousel__indicators--outside button{
        background: transparent;
    }
    .el-carousel__indicators {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .el-carousel__indicator--horizontal {
        padding: 0;
    }

    .el-carousel__indicator {
        display: inline-block;
        margin: 20px 8px;
        border-radius: 50%; /* 创建圆形指示器 */
        width: 20px; /* 圆点宽度 */
        height: 20px; /* 圆点高度 */
        border: 1px solid rgb(221, 221, 221);
        background-color: rgb(221, 221, 221); /* 圆点颜色 */

    }

    .el-carousel__indicator.is-active {
        border: 1px solid #007aff;
        background-color: #007aff; /* 当前活动圆点的颜色 */
    }

    .el-carousel__button {
        background: transparent;
    }

</style>